<template>
    <div>
        <el-form-item :label="item.attributeLabel">
            <el-col :span="12">
                <el-select v-model="form[item.attributeLabel]" @visible-change="getOptions(item.id)"
                    @change="handleSelectChange(index)">
                    <el-option v-for="option in options" :key="option.id" :label="option.name"
                        :value="option.id"></el-option>
                </el-select>
            </el-col>
        </el-form-item>

        <el-form-item :label="data.attributeName" v-for="(data, dataindex) in selectedItemList[item.id]" :key="dataindex">
            <el-row :label="data.attributeName" :span="12">
                <el-col :span="8">
                    <el-input v-model="form[data.attributeName]" placeholder="请输入" />
                </el-col>
                <el-col :span="4">
                    <el-tag>{{ data.unit }}</el-tag>
                    <el-tooltip effect="dark" :content="data.attributeDescription" placement="top">
                        <i class="el-icon-warning-outline"></i>
                    </el-tooltip>
                </el-col>
            </el-row>
        </el-form-item>
    </div>
</template>
<script>

export default {
    props: ['item', 'form', 'selectedItemList'],
    data() {
        return {
            options: []
        }
    },
    mounted() {
        // 加载的时候获取数据用
        this.getOptions(this.item.id)
    },
    methods: {
        async getOptions(itemId) {
            this.options = [];
            const response = await getCostAlgorithmDataByAlgorithmDbId(itemId);
            this.options = response.data;
        },
        handleSelectChange(id) {
            if (!id) {
                this.options = [];
            } else {
                // 接口
            }
        }
    }
}
</script>
<style scoped></style>